<template>
	<view>
		<view @tap="treeEvent()">
			<!-- 树形 -->
			<view class="formlist inputtext" v-if="jnpfKey == 'treeSelect'">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle" v-if="showLabel">
						<label>{{label}}</label>
						<text class="required" v-show="required">*</text>
					</view>
					<view class="controlvalue">
						<view v-model="valueTitle">{{valueTitle == '' ? defaultValue : valueTitle}}</view>
						<!-- <input type="text" v-model="valueTitle" :placeholder="placeholder" :disabled="disabled"> -->
					</view>
				</view>
			</view>
			
			<!-- 级联 -->
			<view class="formlist inputtext" v-if="jnpfKey == 'cascader'">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle" v-if="showLabel">
						<label>{{label}}</label>
						<text class="required" v-show="required">*</text>
					</view>
					<view class="controlvalue">
						<!-- <input type="text" v-model="valueTitle" :placeholder="placeholder" :disabled="disabled"> -->
						<view v-model="valueTitle">{{valueTitle== '' ? defaultValue : valueTitle}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部tree选择 -->
		<uni-popup type="bottom" mode="insert" :mask-click="true" ref="process">
			<view class="uni-share" style="height: 500rpx;">
				<view class="uni-share-content">
					<view>
						<ly-tree 
							:tree-data="treeSelect.data"
							:defaultExpandAll= treeSelect.defaultExpandAll
							node-key="id" 
							:props="treeSelect.props"
							ref="treeSelect"
							@node-expand="handleNodeExpand" 
							@node-click="handleNodeClick" />
					</view>
					<text class="uni-share-content-text"></text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	
	export default {
		components:{
			uniPopup,
		},
		props:{
			value:'',
			jnpfKey:{
				type:String,
				default(){
					return ''
				}
			},
			dictionaryType:{
				type:String,
				default(){
					return ''
				}
			},
			dataType:{
				type:String,
				default(){
					return ''
				}
			},
			tableModel:{
				type:String,
				default(){
					return ''
				}
			},
			vModel:{
				type:String,
				default(){
					return ''
				}
			},
			placeholder:{
				type:String,
				default(){
					return '请选择'
				}
			},
			label:{
				type:String,
				default(){
					return ''
				}
			},
			options:{
				type:Array,
				default(){
					return [{fullName:'默认一',id:'1',children:[{fullName:'默认1-1',id:'2'}]}]
				}
			},
			disabled:{
				type:Boolean,
				default(){
					return false
				}
			},
			required:{
				type:Boolean,
				default(){
					return false
				}
			},
			showLabel:{
				type:Boolean,
				default(){
					return true
				}
			},
			isId:{
				type:Boolean,
				default(){
					return false
				}
			},
			
		},
		data() {
			return {
				treeSelect:{
					data:[],
					defaultExpandAll:true,
					props:{
						children: 'children', // 指定子树为节点对象的某个属性值
						label: 'fullName', // 指定节点标签为节点对象的某个属性值
						disabled: 'disabled' ,//	指定节点选择框是否禁用为节点对象的某个属性值
						value: 'id'
					},
				},
				valueTitle:'',
				defaultValue:this.placeholder,
				option:this.options,
				nodePaths:null,
				control:{
					vModel:'',
					jnpfKey:'',
					tableModel:''
				}
			};
		},
		created() {
			let vModel = this.vModel;
			if(this.jnpfKey == 'treeSelect'){
				this.treeSelect.data = this.option[vModel];
			}else if(this.jnpfKey == "cascader"){
				this.treeSelect.data = this.option[vModel];
			}
			this.handel(this.value);
			
		},
		
		watch:{
			/* 监听值的改变 */
			value(val){
				this.handel(this.value)
			}
		},
		methods:{
			handel(value){
				let vModel = this.vModel;
				if(this.jnpfKey == 'treeSelect'){
					this.treeSelect.data = this.option[vModel];
				}else if(this.jnpfKey == "cascader"){
					this.treeSelect.data = this.option[vModel];
				}
				
				if(value != undefined){
					if(this.jnpfKey == 'treeSelect'){
						let option = this.option[this.vModel];
						
						outer:for(let i = 0;i<option.length;i++){
							if(value == option[i].id){
								this.valueTitle = option[i].fullName
							}
							let children = option[i].children
							inter:for(let j = 0;j<children.length;j++){
								if(value == children[j].id){
									this.valueTitle = children[j].fullName
								}
								break inter
							}
						}
					}else{
						let options = this.option[this.vModel];
						let fullName = [];
						outer: for (let j = 0; j < value.length; j++) {
							inter: for (let jj = 0; jj < options.length; jj++) {
								if (value[j] == options[jj].id) {
									fullName.push(options[jj].fullName)
									if (options[jj].children) options = options[jj].children
									break inter
								}
							}
						}
						this.valueTitle = fullName.join(',')
					}
				}
			},
			
			
			
			treeEvent(){
				const vModel = this.__vModel__;
				const dictionaryType = this.dictionaryType;
				const jnpfKey = this.jnpfKey;
				const tableModel = this.tableModel
				const dataType = this.dataType;
				this.control = {
					vModel:vModel,
					jnpfKey:jnpfKey,
					tableModel:tableModel
				}
				
				if(!this.disabled){
					this.$refs.process.open();
				}
			},
			handleNodeClick(e){
				
				let nodePath = this.$refs.treeSelect.getNodePath(e);
				const currentNode = this.$refs.treeSelect.getCurrentNode();
				let label = [];
				let _id_ = [];
				if(this.control.jnpfKey == 'cascader'){
					nodePath.forEach((item,index)=>{
						label.push(nodePath[index].fullName);
						_id_.push(nodePath[index].id);
					})
					if(label == '' || label == undefined){
						this.$emit('input',null)
					}
					this.$emit('input',_id_)
					label = label.join('/');
					this.valueTitle = label
					this.$refs.process.close();
					
					return;
				}
				
				this.valueTitle = e.label
				if(e.label == '' || e.label == undefined){
					this.$emit('input',null)
				}
				this.$emit('input',e.key)
				this.$refs.process.close();
				
			},
			handleNodeExpand(e){
				
			},
		},
		
	}
</script>

<style>
	.required{
		color: red;
	}
</style>
